<template>
	<div class="wrap">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="wrapbd">
            <div class="roll_i">
                <span>新手机号</span>
                <input type="tel" placeholder="请输入新手机号" maxlength="11" v-model.trim="phone">
            </div>
            <div class="roll_i verycode">
                <span>验证码</span>
                <input type="tel" placeholder="请输入验证码" v-model.trim="code" maxlength="6">
				<codetimeout :phone = "phone" :count.sync = "count"></codetimeout>
            </div>
			<input class="l_button" type="button" value="确认修改" :disabled="disableBtn" @click="reviseMobile()">
		</div>
	</div>
</template>
<script>
	import codetimeout from './../../components/codeTimeout';
	import HeadTitle from "./../../components/title.vue";   
	export default {
		data(){
			return {
				headText: '更换手机号',  //顶部标题
				phone:'',
				code:'',
				count: 0,
				disableBtn:false,
				aaa:{
					b:'丁丁'
				}
			}
		},
		methods:{
			//返回
			onClickLeft () { this.$router.go(-1);},
			//重置手机号
			reviseMobile(){
	            var _this = this;
				if(!this.Tools.regCombination.null.test(_this.phone)){
                    this.$toast({message: '请输入新手机号码', position: 'bottom'})
                }else if(!this.Tools.regCombination.phone.test(_this.phone)){
					this.$toast({message: '请输入正确的手机号', position: 'bottom'})
				}else if (!this.Tools.regCombination.null.test(_this.code)){
                    this.$toast({message:'验证码不能为空',position:'bottom'})
                }else{
	                this.disableBtn = true;
	                this.Tools.AXIOS({
	                    url:'user/editmoble',
	                    transformRequest:{
							moble: this.phone,
							sms_code: this.code,
	                    },
	                    success:function (res) { 
							_this.$toast.success('修改成功');
							setTimeout(function(){_this.$router.push('/setting')},2000)
							_this.disableBtn = false;
	                    },
                        error(res){
                            _this.disableBtn = false;
                        }
	                })
                }   	
			}
		},
		components: {
			HeadTitle,
			codetimeout,
		},
	}
</script>
<style scoped>
.wrapbd .roll_i{ width: 100%; display: flex; background: #fff; padding: .5rem 0; border-bottom: 1px solid #F6F6F6; position: relative;}
.wrapbd .roll_i span{ font-size: .35rem; text-indent: 12px;}
.wrapbd .roll_i input{ width: 60%; margin-left: .5rem; font-size: .35rem;}
.wrapbd p{ padding: 0 .3rem; font-size: .3rem; color: #bbbbbb;}
.wrapbd .l_button{ width: 90%; display: block; margin: 10% auto 0; padding: .3rem 0; background: #00990B; text-align: center; font-size: .4rem; color: #fff; border-radius: 6px;}
.verycode button{ right: .2rem;}
</style>
